#web_bg {
    background-image: url("../img/bg.jpg"),
        linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35))
}

/* 侧边栏个人信息卡片动态渐变色 */
#aside-content>.card-widget {
    background: linear-gradient(-45deg,
            #e8d8b9,
            #eccec5,
            #a3e9eb,
            #bdbdf0,
            #eec1ea);
    box-shadow: 0 0 5px rgb(66, 68, 68);
    position: relative;
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
    background-color: #3eb8be;
    border-radius: 8px;
}

#aside-content>.sticky_layout>.card-widget {
    background: rgba(255, 255, 255, .8);


}

/*文章页面*/
.layout>#post {
    background: rgba(255, 255, 255, .8);
}

/*分类页面*/
.layout>#page {

    background: rgba(255, 255, 255, .6);
}

/*时间轴页面*/
.layout>#archive {
    background: rgba(255, 255, 255, .6);
}

/* 背景宇宙星光  */
#universe {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.nav-fixed #nav{
    transform: translateY(58px)!important;
    -webkit-transform: translateY(58px)!important;
    -moz-transform: translateY(58px)!important;
    -ms-transform: translateY(58px)!important;
    -o-transform: translateY(58px)!important;
}
#nav{
    transition: none!important;
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
}

/*显示标题*/
#page-name::before {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    color: white !important;
    top: 0;
    left: 0;
    background-color: var(--lyx-theme);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    opacity: 0;
    box-shadow: 0 0 3px var(--lyx-theme);
    line-height: 45px;
    /*如果垂直位置不居中可以微调此值，也可以删了*/
}

#page-name:hover:before {
    opacity: 1;
}

@media screen and (max-width:900px) {

    #page-name,
    #menus {
        display: none !important;
    }
}

#name-container {
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

#name-container:hover {
    scale: 1.03
}

#page-name {
    position: relative;
    padding: 10px 30px
}

#nav {
    padding: 0 20px;
}

/*顶部加载进度条*/
.pace {
    pointer-events: none;
    user-select: none;
    z-index: 2;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 6rem;
    background: #eaecf2;
    overflow: hidden;
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: 0.3s ease-in;
}

.pace.pace-inactive {
    opacity: 0;
    transition: 0.3s;
    top: -8px;
}

.pace .pace-progress {
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    position: fixed;
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: #49b1f5;
    background: linear-gradient(to right,
            rgb(18, 194, 233),
            rgb(196, 113, 237),
            rgb(246, 79, 89));
    animation: gradient 2s ease infinite;
    background-size: 200%;
}

#nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
}